<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>bilibili-干杯~~~</title>
   <!-- 引入favicon图标 -->
   <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="./less/index.css">
   <!-- 引入字体图标文件 -->
   <link rel="stylesheet" href="./fonts/iconfont.css">
</head>

<body>
   <!-- 头部模块 -->
   <header class="suspension">
      <div class="m-navbar">
         <a href="#" class="logo">
            <i class="iconfont Navbar_logo"></i>
         </a>
         <div class="right">
            <a href="#" class="search">
               <i class="iconfont ic_search_tab"></i>
            </a>
            <a href="#" class="face">
               <img src="./images/login.png" alt="">
            </a>
            <div class="app-btn">
               <img src="./images/download.png" alt="">
            </div>
         </div>
      </div>
      <div class="channel-menu">
         <div class="tabs">
            <div class="tabs-list">
               <a href="#">首页</a>
               <a href="#">动画</a>
               <a href="#">番剧</a>
               <a href="#">果蔬</a>
               <a href="#">音乐</a>
               <a href="#">舞蹈</a>
               <a href="#">鬼畜</a>
               <a href="#">美食</a>
               <!-- 红色线 -->
               <div class="line"></div>
            </div>
         </div>
         <div class="after">
            <i class="iconfont general_pulldown_s"></i>
         </div>
      </div>
   </header>

   <!-- 内容模块 -->
   <div class="m-home">
      <div class="video-list">
         <a href="#" class="video-item">
            <div class="card">
               <img src="./images/5.jpg" alt="">
               <!-- 播放量 -->
               <div class="count">
                  <span>
                     <i class="iconfont icon_shipin_bofangshu"></i>
                     28.6万
                  </span>
                  <span>
                     <i class="iconfont icon_shipin_danmushu"></i>
                     1324
                  </span>
               </div>
            </div>
            <p class="title .ellipsis-2">
               Apink最新MV发布
            </p>
         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="./images/3.jpg" alt="">
               <!-- 播放量 -->
               <div class="count">
                  <span>
                     <i class="iconfont icon_shipin_bofangshu"></i>
                     33.6万
                  </span>
                  <span>
                     <i class="iconfont icon_shipin_danmushu"></i>
                     5324
                  </span>
               </div>
            </div>
            <p class="title .ellipsis-2">
               Apink最新MV发布
            </p>
         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="./images/4.jpg" alt="">
               <!-- 播放量 -->
               <div class="count">
                  <span>
                     <i class="iconfont icon_shipin_bofangshu"></i>
                     66.6万
                  </span>
                  <span>
                     <i class="iconfont icon_shipin_danmushu"></i>
                     6356
                  </span>
               </div>
            </div>
            <p class="title .ellipsis-2">
               Apink最新MV发布
            </p>
         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="./images/6.jpg" alt="">
               <!-- 播放量 -->
               <div class="count">
                  <span>
                     <i class="iconfont icon_shipin_bofangshu"></i>
                     99.6万
                  </span>
                  <span>
                     <i class="iconfont icon_shipin_danmushu"></i>
                     9324
                  </span>
               </div>
            </div>
            <p class="title .ellipsis-2">
               Apink最新MV发布
            </p>
         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="./images/7.jpg" alt="">
               <!-- 播放量 -->
               <div class="count">
                  <span>
                     <i class="iconfont icon_shipin_bofangshu"></i>
                     128.6万
                  </span>
                  <span>
                     <i class="iconfont icon_shipin_danmushu"></i>
                     13.2万
                  </span>
               </div>
            </div>
            <p class="title .ellipsis-2">
               Apink最新MV发布
            </p>
         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="./images/5.jpg" alt="">
               <!-- 播放量 -->
               <div class="count">
                  <span>
                     <i class="iconfont icon_shipin_bofangshu"></i>
                     28.6万
                  </span>
                  <span>
                     <i class="iconfont icon_shipin_danmushu"></i>
                     1324
                  </span>
               </div>
            </div>
            <p class="title .ellipsis-2">
               Apink最新MV发布
            </p>
         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="./images/3.jpg" alt="">
               <!-- 播放量 -->
               <div class="count">
                  <span>
                     <i class="iconfont icon_shipin_bofangshu"></i>
                     33.6万
                  </span>
                  <span>
                     <i class="iconfont icon_shipin_danmushu"></i>
                     5324
                  </span>
               </div>
            </div>
            <p class="title .ellipsis-2">
               Apink最新MV发布
            </p>
         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="./images/4.jpg" alt="">
               <!-- 播放量 -->
               <div class="count">
                  <span>
                     <i class="iconfont icon_shipin_bofangshu"></i>
                     66.6万
                  </span>
                  <span>
                     <i class="iconfont icon_shipin_danmushu"></i>
                     6356
                  </span>
               </div>
            </div>
            <p class="title .ellipsis-2">
               Apink最新MV发布
            </p>
         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="./images/6.jpg" alt="">
               <!-- 播放量 -->
               <div class="count">
                  <span>
                     <i class="iconfont icon_shipin_bofangshu"></i>
                     99.6万
                  </span>
                  <span>
                     <i class="iconfont icon_shipin_danmushu"></i>
                     9324
                  </span>
               </div>
            </div>
            <p class="title .ellipsis-2">
               Apink最新MV发布
            </p>
         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="./images/7.jpg" alt="">
               <!-- 播放量 -->
               <div class="count">
                  <span>
                     <i class="iconfont icon_shipin_bofangshu"></i>
                     128.6万
                  </span>
                  <span>
                     <i class="iconfont icon_shipin_danmushu"></i>
                     13.2万
                  </span>
               </div>
            </div>
            <p class="title .ellipsis-2">
               Apink最新MV发布
            </p>
         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="./images/5.jpg" alt="">
               <!-- 播放量 -->
               <div class="count">
                  <span>
                     <i class="iconfont icon_shipin_bofangshu"></i>
                     28.6万
                  </span>
                  <span>
                     <i class="iconfont icon_shipin_danmushu"></i>
                     1324
                  </span>
               </div>
            </div>
            <p class="title .ellipsis-2">
               Apink最新MV发布
            </p>
         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="./images/3.jpg" alt="">
               <!-- 播放量 -->
               <div class="count">
                  <span>
                     <i class="iconfont icon_shipin_bofangshu"></i>
                     33.6万
                  </span>
                  <span>
                     <i class="iconfont icon_shipin_danmushu"></i>
                     5324
                  </span>
               </div>
            </div>
            <p class="title .ellipsis-2">
               Apink最新MV发布
            </p>
         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="./images/4.jpg" alt="">
               <!-- 播放量 -->
               <div class="count">
                  <span>
                     <i class="iconfont icon_shipin_bofangshu"></i>
                     66.6万
                  </span>
                  <span>
                     <i class="iconfont icon_shipin_danmushu"></i>
                     6356
                  </span>
               </div>
            </div>
            <p class="title .ellipsis-2">
               Apink最新MV发布
            </p>
         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="./images/6.jpg" alt="">
               <!-- 播放量 -->
               <div class="count">
                  <span>
                     <i class="iconfont icon_shipin_bofangshu"></i>
                     99.6万
                  </span>
                  <span>
                     <i class="iconfont icon_shipin_danmushu"></i>
                     9324
                  </span>
               </div>
            </div>
            <p class="title .ellipsis-2">
               Apink最新MV发布
            </p>
         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="./images/7.jpg" alt="">
               <!-- 播放量 -->
               <div class="count">
                  <span>
                     <i class="iconfont icon_shipin_bofangshu"></i>
                     128.6万
                  </span>
                  <span>
                     <i class="iconfont icon_shipin_danmushu"></i>
                     13.2万
                  </span>
               </div>
            </div>
            <p class="title .ellipsis-2">
               Apink最新MV发布
            </p>
         </a>

      </div>
   </div>

   <!-- 底部模块 -->
   <footer class="footer">
      <div class="btn">
         <i class="iconfont Navbar_logo"></i>
         <span>打开App,看你感兴趣的视频</span>
      </div>
   </footer>
</body>

</html>